<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 理想视口 标准 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>手机京东</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <!-- 左侧 logo-->
      <a class="logo" href="javascript:;"></a>
      <!-- 中间 搜索框 -->
      <div class="search">
        <input placeholder="100万件超级爆品疯抢" type="text" />
      </div>
      <!-- 右侧 登录 -->
      <a class="login" href="javascript:;">登录</a>
    </header>
    <!-- 轮播图 -->
    <section class="slides">
      <!-- 轮播 -->
      <ul class="slides_ul">
      <li><a href="javascript:;"><img src="./uploads/l8.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l1.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l2.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l3.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l4.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l5.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l6.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l7.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l8.jpg" alt=""></a></li>
      <li><a href="javascript:;"><img src="./uploads/l1.jpg" alt=""></a></li>
      </ul>
      <!-- 索引器 -->
      <ul class="indexer clearfix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </section>

    <!-- 首页导航 -->
    <nav>
      <!-- (a[href="javascript:;"]>img[src="./images/nav_$.png"]+p{京东超市})*8 -->
      <a href="javascript:;">
        <img src="./images/nav_1.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_2.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_3.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_4.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_5.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_6.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_7.png" alt="" />
        <p>京东超市</p>
      </a>
      <a href="javascript:;">
        <img src="./images/nav_8.png" alt="" />
        <p>京东超市</p>
      </a>
    </nav>

    <!-- 掌上秒杀 -->
    <div class="second_kill">
      <!-- 头部 -->
      <div class="second_kill_title">
        <!-- 闹钟 -->
        <span class="clock"></span>
        <!-- 掌上秒杀 -->
        <span class="second_kill_name">掌上秒杀</span>
        <!-- 倒计时 -->
        <div class="timer">
          <span>0</span> <span>4</span> <span>:</span> <span>1</span>
          <span>8</span> <span>:</span> <span>0</span> <span>9</span>
        </div>
        <!-- 超链接 -->
        <a href="javascript:;">更多秒杀 > </a>
      </div>
      <!-- 内容 -->
      <div class="second_kill_content">
        <a href="javascript:;">
          <img src="./uploads/seckill_1.jpg" alt="" />
          <span class="tips">热卖</span>
          <p class="news_price">￥79</p>
          <del class="old_price">￥799</del>
        </a>
        <a href="javascript:;">
          <img src="./uploads/seckill_2.jpg" alt="" />
          <span class="tips">热卖</span>
          <p class="news_price">￥79</p>
          <del class="old_price">￥799</del>
        </a>
        <a href="javascript:;">
          <img src="./uploads/seckill_3.jpg" alt="" />
          <span class="tips">热卖</span>
          <p class="news_price">￥79</p>
          <del class="old_price">￥799</del>
        </a>
      </div>
    </div>

    <!-- 主题日 -->
    <div class="theme_day">
      <!-- 标题 -->
      <div class="theme_day_title">
        <!-- 大图片 -->
        <img src="./uploads/banner_bg.jpg" alt="" />
        <!-- 小图片容器 -->
        <div class="banners_wrap clearfix">
          <a href="javascript:;"><img src="./uploads/banner_1.jpg" alt=""/></a>
          <a href="javascript:;"><img src="./uploads/banner_2.jpg" alt=""/></a>
          <a href="javascript:;"><img src="./uploads/banner_3.jpg" alt=""/></a>
        </div>
      </div>
      <!-- 内容 -->
      <div class="theme_day_content">
        <a href="javascript:;"><img src="./uploads/major_1.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_2.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_3.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_4.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_5.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_6.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/major_7.jpg" alt=""/></a>
      </div>
    </div>

    <!-- 广告 -->
    <a href="javascript:;" class="adv">
      <img src="./uploads/advert_1.jpg" alt="" />
    </a>

    <!-- 超市 -->
    <div class="market">
      <div class="market_title goods_title">特色超市</div>
      <div class="market_content clearfix">
        <a href="javascript:;"> <img src="./uploads/market_1.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/market_2.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/market_3.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/market_4.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/market_5.jpg" alt="" /> </a>
      </div>
    </div>

    <!-- 广告 -->
    <a href="javascript:;" class="adv">
      <img src="./uploads/advert_2.jpg" alt="" />
    </a>

    <!-- 主题街 -->
    <div class="theme_stree">
      <!-- 标题 -->
      <div class="theme_stree_title goods_title ">主题街</div>
      <!-- 内容 -->
      <div class="theme_stree_content clearfix">
        <a href="javascript:;"><img src="./uploads/theme_1.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_2.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_3.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_4.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_5.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_6.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_7.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_8.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_9.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_10.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_11.jpg" alt=""/></a>
        <a href="javascript:;"><img src="./uploads/theme_12.jpg" alt=""/></a>
      </div>
    </div>
    <!-- 广告 -->
    <a href="javascript:;" class="adv">
      <img src="./uploads/advert_3.jpg" alt="" />
    </a>

    <!-- 品牌 推荐 -->
    <div class="brand">
      <div class="brand_title goods_title">品牌推荐</div>
      <div class="brand_content">
        <a href="javascript:;"> <img src="./uploads/brand_1.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/brand_2.jpg" alt="" /> </a>
        <a href="javascript:;"> <img src="./uploads/brand_3.jpg" alt="" /> </a>
      </div>
    </div>

    <!-- 广告 -->
    <a href="javascript:;" class="adv">
      <img src="./uploads/advert_4.jpg" alt="" />
    </a>
    <!-- 猜你喜欢 -->
    <div class="guess">
      <!-- 人类的本质 复读机。。。。 -->
      <div class="guess_title goods_title">
        <span>猜你喜欢</span>
        <a href="javascript:;">
          <img src="./images/icon-login.png" alt="" /> 登录后更懂你 >
        </a>
      </div>
      <div class="guess_content">
        <ul>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_1.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_2.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_3.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_4.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_5.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_6.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_7.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_8.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_9.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
          <li>
            <!-- 头部 -->
            <div class="guess_goods_title">
              <span>￥25</span> <a href="javascript:;">看相似</a>
            </div>
            <!-- 详情 -->
            <a class="guess_goods_detail" href="javascript:;">
              <img src="./uploads/item_10.jpg" alt="" />
              <p>
                迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表
                多功能运动表男童学生手表80008-1
              </p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom_tool">
      <!-- 点击加载更多 -->
      <a href="javascript:;" class="more">点击加载更多</a>
      <!-- 底部链接 -->
      <div class="btm_link">
        <a href="javascript:;">登录</a> <a href="javascript:;">注册</a>
        <a href="javascript:;">反馈</a> <a href="javascript:;">回到顶部</a>
      </div>
      <!-- 设备 -->
      <div class="btm_devices">
        <a href="javascript:;">
          <span></span>
          <p>客户端</p>
        </a>
        <a href="javascript:;">
          <span></span>
          <p>客户端</p>
        </a>
        <a href="javascript:;">
          <span></span>
          <p>客户端</p>
        </a>
      </div>
      <!-- 版权所有 -->
      <div class="copyright">Copyright © 2004-2016 京东JD.com 版权所有</div>
    </div>

    <!-- 尾部导航 -->
    <footer>
      <a href="javascript:;"> <img src="./images/index-icon.png" alt="" /> </a>
      <a href="javascript:;"> <img src="./images/sort-icon.png" alt="" /> </a>
      <a href="javascript:;"> <img src="./images/618-icon.png" alt="" /> </a>
      <a href="javascript:;"> <img src="./images/cart-icon.png" alt="" /> </a>
      <a href="javascript:;"> <img src="./images/center-icon.png" alt="" /> </a>
    </footer>
  </body>

  <script src="./js/itcastEvent.js"></script>
  <script src="./js/index.js"></script>
</html>
